import React, { useState, useEffect, useRef } from "react";

const TypewriterText = (props) => {
  const [stringA, setStringA] = useState("");
  const [stringB, setStringB] = useState("");
  const [stringC, setStringC] = useState("");
  
  // 打印效果函数
  const print = () => {
    if (stringA.length >= stringC.length) {
      // 打印完成，通知父组件
      props.listenPrintHtml(true);
      // 退出递归
      return;
    } else {
      // stringA仍然比stringC短，进入下一次等待和递归
      setTimeout(() => {
        setStringA(prev => prev + stringC.charAt(prev.length));
        // React中不需要传递参数，因为状态已经更新
        print();
      }, 50);
    }
  };
  
  // 组件挂载时执行 - 相当于onMounted
  useEffect(() => {
    // 判断时间段，设置不同的欢迎语
    const dateHours = new Date().getHours();
    
    if (dateHours >= 0 && dateHours < 6) {
      setStringB("夜深了");
      setStringC("夜深了，我是您的深夜守护者小助手，24小时无微不至的智能伴侣。");
    } else if (dateHours >= 6 && dateHours < 12) {
      setStringB("上午好");
      setStringC("小助手愿您拥有美好的一天，有什么可以帮到您？");
    } else if (dateHours >= 12 && dateHours < 18) {
      setStringB("下午好");
      setStringC("希望下午的时光充满效率与收获，有问题随时问我哦。");
    } else {
      setStringB("晚上好");
      setStringC("小助手在这里守候，让我们共同面对每一个挑战。");
    }
    
    // 注意：在React中，在useEffect中调用的函数会在状态更新后执行
    // 因此我们需要确保stringC已经更新
    // 可以使用setTimeout确保在下一个event loop中执行
    const timer = setTimeout(() => {
      print();
    }, 0);
    
    // 清理函数
    return () => clearTimeout(timer);
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
    // 我们只希望此effect在组件挂载时运行一次，所以依赖数组为空
  }, []);
  
  return (
    <main>
      <div className="htmltext">
        <span className="move1">{stringB}</span>
        <p className="move2">{stringA}</p>
        {/* 
        <p className="move3">今天有什么想跟我分享的吗?</p>
        <p className="move4">或者遇到了什么问题?</p>
        <p className="move5">或许我可以帮助你噢~</p> 
        */}
      </div>
      {/* <p className="text" dangerouslySetInnerHTML={{ __html: stringA }}></p> */}
    </main>
  );
};

// 默认props
TypewriterText.defaultProps = {
  homeInfo: {},
  listenPrintHtml: () => {}
};

export default TypewriterText;

// CSS可以通过CSS-in-JS方式添加，这里简单展示一下
// 实际使用时，您可能需要根据项目配置选择合适的CSS方案
/* CSS样式：
* {
  font-size: 0px;
}
.text {
  font-size: 30px;
}
.htmltext {
  padding: 0 30px;
}
.htmltext > span {
  font-size: 28px;
  letter-spacing: 0px;
  color: #003a70;
  animation-fill-mode: forwards;
}
.htmltext > p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 26px;
  color: rgba(0, 58, 112, 1);
  margin-top: 9px;
  display: block;
  margin-top: 6px;
  animation-fill-mode: forwards;
}
.move3 {
  animation: moveP 1s;
  animation-delay: 2s;
}
.move4 {
  animation: movePr 1s;
  animation-delay: 3s;
}
.move5 {
  animation: moveP 1s;
  animation-delay: 4s;
}
@keyframes moveP {
  0% {
    opacity: 0;
    margin-left: 20px;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}
@keyframes movePr {
  0% {
    opacity: 0;
    margin-right: 20px;
  }
  100% {
    opacity: 1;
    margin-right: 0;
  }
}
*/